<!--
 * @Author: Charlie/彭旺
 * @email: 413157399@qq.com
 * @Date: 2022-06-23 09:36:45
-->
<template>
  <div class="app-container">
    <el-form
      ref="form"
      :rules="rules"
      size="small"
      label-width="150px"
      :model="vediodetail"
    >
      <el-form-item label="标题:">
        <el-input style="width: 370px" v-model="vediodetail.title" disabled />
      </el-form-item>
      <el-form-item label="发布者：">
        <el-input
          style="width: 370px"
          v-model="vediodetail.userName"
          disabled
        />
      </el-form-item>
      <el-form-item label="发布者头像：">
        <div>
          <img
            :src="userAvatarImg"
            :="lookuserAvatarImg(vediodetail.userAvatar)"
            style="width: 100px; height: 100px"
          />
        </div>
      </el-form-item>
      <el-form-item label="封面图：">
        <div>
          <img
            :src="coverUrlImg"
            :="lookcoverUrlImg(vediodetail.coverUrl)"
            style="width: 100px; height: 100px"
          />
        </div>
      </el-form-item>
      <el-form-item label="浏览量：">
        <el-input
          style="width: 370px"
          v-model="vediodetail.viewCount"
          disabled
        />
      </el-form-item>
      <el-form-item label="获赞数：">
        <el-input
          style="width: 370px"
          v-model="vediodetail.likeCount"
          disabled
        />
      </el-form-item>
      <el-form-item label="评论数：">
        <el-input
          style="width: 370px"
          v-model="vediodetail.commentCount"
          disabled
        />
      </el-form-item>
      <el-form-item label="时长：">
        <el-input
          style="width: 370px"
          v-model="vediodetail.duration"
          disabled
        />
      </el-form-item>
      <el-form-item label="背景音乐作者：">
        <el-input
          style="width: 370px"
          v-model="vediodetail.bgmAuthor"
          disabled
        />
      </el-form-item>
      <el-form-item label="背景音乐名称：">
        <el-input style="width: 370px" v-model="vediodetail.bgmId" disabled />
      </el-form-item>
      <el-form-item label="背景音乐：">
        <audio controls :src="vediodetail.bgmUrl"></audio>
      </el-form-item>

      <el-form-item label="商品视屏">
        <div>
          <video
            style="width: 400px !important; height: 450px !important"
            :src="vediodetail.playUrl"
            controls
          ></video>
        </div>
      </el-form-item>
      <el-form-item label="机审状态：">
        <el-radio-group v-model="vediodetail.aiAuditStatus">
          <el-radio :label="0" disabled>进行中</el-radio>
          <el-radio :label="1" disabled>通过</el-radio>
          <el-radio :label="2" disabled>不通过</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="人工审核状态：">
        <el-radio-group v-model="vediodetail.auditStatus">
          <el-radio :label="0" disabled>进行中</el-radio>
          <el-radio :label="1" disabled>通过</el-radio>
          <el-radio :label="2" disabled>不通过</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="this.vediodetail.auditStatus === 2">
        <el-input
          type="textarea"
          :rows="12"
          v-model="this.vediodetail.auditOpinion"
          disabled
          style="width: 370px"
        />
      </el-form-item>

      <el-form-item label="人工审核时间：">
        <el-input
          style="width: 370px"
          v-model="vediodetail.auditTime"
          disabled
        />
      </el-form-item>
      <el-form-item label="人工审核人" v-if="this.vediodetail.auditStatus != 0">
        <el-input style="width: 370px" v-model="vediodetail.auditor" disabled />
      </el-form-item>
      <!-- 审核不通过的原因 -->
      <el-form-item>
        <el-dialog
          title="原因"
          :visible.sync="failCause"
          width="30%"
          :before-close="handleClose"
        >
          <div>
            <el-input
              type="textarea"
              :rows="12"
              placeholder="请输入审核不通过的原因"
              v-model="textarea"
            >
            </el-input>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="failCause = false">取 消</el-button>
            <el-button type="primary" @click="failCauseTrue">确 定</el-button>
          </span>
        </el-dialog>
      </el-form-item>
      <el-form-item label="上下架状态：">
        <el-radio-group v-model="vediodetail.status">
          <el-radio :label="1" disabled>上架</el-radio>
          <el-radio :label="0" disabled>下架</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 上/下架原因 -->
      <el-form-item :label="vediodetail.status === 1 ? '上架原因' : '下架原因'">
        <el-input
          style="width: 370px"
          v-model="vediodetail.offReason"
          type="textarea"
          disabled
        />
      </el-form-item>

      <!-- 上/下架时间 -->
      <el-form-item :label="vediodetail.status === 1 ? '上架时间' : '下架时间'">
        <el-input
          style="width: 370px"
          v-model="vediodetail.onOrOffTime"
          disabled
        />
      </el-form-item>

      <!-- 上下架人 -->
      <el-form-item :label="vediodetail.status === 1 ? '上架人' : '下架人'">
        <el-input
          style="width: 370px"
          v-model="vediodetail.onOrOffUser"
          :disabled="false"
        />
      </el-form-item>

      <el-form-item label="" v-if="skipType">
        <el-button type="primary" @click="auditPass">审核通过</el-button>
        <el-button type="primary" @click="back">返回</el-button>
        <el-button type="danger" @click="auditFailure">审核不通过</el-button>
      </el-form-item>
      <el-form-item label="" v-else>
        <el-button type="primary" @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script src="@assets/lib/aliyun-upload-sdk/lib/es6-promise.min.js"></script>
<script src="@assets/lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-6.17.1.min.js"></script>
<script src="@assets/lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.3.min.js"></script>
<script>
import CRUD, { presenter, header } from "@crud/crud";
import pagination from "@crud/Pagination";
import { findlist, ManualReview } from "@/api/yxSystemConfig";
import { imgurl } from "@/api/yxUser";

// crud交由presenter持有
const defaultCrud = CRUD({ url: "api/generator/tables" });
export default {
  name: "Preview",
  // mixins: [presenter(defaultCrud), header()],
  data() {
    return {
      // 控制从点击人工审核进入还是从详情进入
      id: "",
      skipType: true,
      form: {},
      rules: {},
      queryTypeOptions: [],
      dialogImageUrl: "",
      dialogVisible: false,
      gridData: [],
      dialogTableVisible: false,
      forms: [],
      failCause: false,
      textarea: "",
      vediodetail: "",
      coverUrlImg: "",
      userAvatarImg: "",
    };
  },
  components: { pagination },
  created() {
    console.log(this.$route.query.id);
    this.skipType = this.$route.query.skipType;
    this.id = this.$route.query.id;
  },
  mounted() {
    this.queryFindlistt();
  },
  beforeDestroy() {},
  methods: {
    // 查看照片
    lookuserAvatarImg(url) {
      imgurl(url)
        .then((res) => {
          // console.log(res);
          this.userAvatarImg = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    lookcoverUrlImg(url) {
      imgurl(url)
        .then((res) => {
          // console.log(res);
          this.coverUrlImg = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 上下架状态

    handleClose() {
      this.failCause = false;
    },
    queryFindlistt() {
      findlist(this.id)
        .then((res) => {
          this.vediodetail = res.data;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    back() {
      this.$router.push({ name: "List" });
    },
    // 审核不通过
    auditFailure() {
      this.failCause = true;
    },
    failCauseTrue() {
      this.vediodetail.auditStatus = 2;
      this.failCause = false;
      console.log(this.textarea);
      ManualReview({
        auditRes: this.vediodetail.auditStatus,
        id: this.id,
        opinion: this.textarea,
      })
        .then((res) => {
          this.$notify({
            title: "操作成功",
            type: "success",
            duration: 2500,
          });
          this.$router.push({ name: "List" });
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 审核通过
    auditPass() {
      this.vediodetail.auditStatus = 1;
      ManualReview({
        auditRes: this.vediodetail.auditStatus,
        id: this.id,
      })
        .then((res) => {
          console.log(res);
          this.$router.push({ name: "List" });
          this.$notify({
            title: "审核通过",
            type: "success",
            duration: 2500,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 选择视屏
    // fileChanges() {
    //   this.$refs.fileUpload.onchange;
    // },
    fileChange(e) {},

    // 点击上传，然后调用 startUpload 方法, 开始上传
    // authUpload() {
    //   if (this.uploader !== null) {
    //     this.uploader.startUpload();
    //   }
    // },
    // handleRemove(file, fileList) {
    //   console.log(file, fileList);
    // },
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url;
    //   this.dialogVisible = true;
    // },
  },
};
</script>
